import DetailCenterLeft from "./DetailCenterLeft";
import ProductIntro from "./ProductIntro";
import Evaluation from "./Evaluation";
import PriceTrendChart from "./PriceTrendChart";
import EventEmitterUtils from "@page/common/utils/EventEmitterUtils";
import CommonUtils from "@page/common/utils/CommonUtils";
import Uts from "@module/Uts";

export default class CenterSection extends React.Component {
    constructor(props) {
        super(props);
        let loginSuppId=Uts.getCookie('suppId');
        let routerSuppId=$state.params&&$state.params.suppId;
        let isSuppSelf=loginSuppId==routerSuppId? true:false;
        this.isSuppSelf=isSuppSelf;
        this.titles_unlogin = ["商品介绍"];
        this.titles_login = [
            "商品介绍",
            "化学品安全卡",
            `全部评价(0)`,
            `本单位评价(0)`,
            "价格走势"
        ];
        this.titles = (global.hasLogin)? this.titles_login : this.titles_unlogin;
        this.state = {
            choosed: 0,
            bannerImg: "",
            titles: this.titles
        };
    }

    componentDidMount() {
        this.getNotice();
        this.addEvent();
    }

    addEvent() {
        EventEmitterUtils.on("scollToProductComments", () => {
            this.setState({
                choosed: 2
            });
            CommonUtils.scrollToById("detail-evaluate-scroll-id");
        });
    }

    componentWillUnmount() {
        EventEmitterUtils.off("scollToProductComments");
    }

    getNotice() {
        let url = `/suppliers/bulletin/one`;
        let params = {
            position: "bot",
            suppId: $state.params.suppId
        };
        REST.post(url, params).then(
            data => {
                if (data.msg == "success") {
                    this.setState({
                        bannerImg: data.data && data.data.content
                    });
                }
            },
            error => {}
        );
    }

    getHeaderTitle() {

        if (global.hasLogin) {
            const { comment, companyComment } = this.props;
            const { total } = comment || {};
            return [
                `商品介绍`,
                "化学品安全卡",
                `全部评价(${total || 0})`,
                `本单位评价(${(companyComment && companyComment.total) || 0})`,
                "价格走势"
            ];
        } else {
            return ["商品介绍"];
        }
    }

    render() {
        const { choosed, bannerImg, titles } = this.state;
        const { suppId, product } = this.props;
        const { suppname } = product || {};
        let headerTitle = this.getHeaderTitle();

        return (
            <React.Fragment>
                {bannerImg && (
                    <img
                        className="zen_w-p100 zen_h-110 zen_m-b-38"
                        src={bannerImg}
                        alt=""
                    />
                )}
                <div className={"detail-center-section"}>
                    <DetailCenterLeft
                        suppname={suppname}
                        suppId={product.suppId || $state.params.suppId}
                    />

                    <div
                        className={"detail-center-info"}
                        id={"detail-evaluate-scroll-id"}
                    >
                        <div className={"detail-center-info-header"}>
                            {headerTitle &&
                                headerTitle.map((item, index) => {
                                    if (
                                        index != 1 ||
                                        (index == 1 &&
                                            product.chemicalSafetyCardUrl != "")
                                    ) {
                                        return (
                                            <NavTitleItem
                                                choosed={choosed == index}
                                                index={index}
                                                key={index}
                                                item={item}
                                                onClick={() => {
                                                    this.setState({
                                                        choosed: index
                                                    });
                                                }}
                                            />
                                        );
                                    }
                                })}
                            <div className={"detail-center-header-nav-other"} />
                        </div>
                        {this.renderDetailInfo(choosed)}
                    </div>
                </div>
            </React.Fragment>
        );
    }

    renderDetailInfo(choosed) {
        const {
            product,
            comment,
            suppId,
            companyComment,
            productId
        } = this.props;
        if (choosed == 0) {
            return <ProductIntro product={product} suppId={suppId} />;
        } else if (choosed == 1) {
            return (
                <div className="zen_m-30">
                    <a
                        href={product.chemicalSafetyCardUrl}
                        target="_blank"
                        className="zen_m-t-30 zen_0093EB"
                    >
                        点击查看化学品安全卡 >>
                    </a>
                    <p className="zen_m-t-30 zen_BCBCBC">
                        该安全卡由“国际化学品安全卡（中文版）”网站提供，所有权归中国石化北京化工研究院所有，本站仅做授权展示。
                    </p>
                </div>
            );
        } else if (choosed == 2) {
            return (
                <Evaluation
                    type={1}
                    product={product}
                    comment={comment}
                    productId={productId}
                />
            );
        } else if (choosed == 3) {
            return (
                <Evaluation type={2} product={product} productId={productId} />
            );
        }

        return <PriceTrendChart product={product} />;
    }
}

class NavTitleItem extends React.Component {
    render() {
        const { item, choosed, index, onClick } = this.props;
        return (
            <div
                onClick={onClick}
                className={this.getClassName(choosed, index)}
            >
                <p>{item}</p>
            </div>
        );
    }

    getClassName(choosed, index) {
        if (choosed && index == 0) {
            return "detail-center-header-nav1";
        } else if (!choosed && index == 0) {
            return "detail-center-header-nav0";
        } else if (choosed && index > 0) {
            return "detail-center-header-nav2";
        } else {
            return "detail-center-header-nav";
        }
    }
}
